<!DOCTYPE html>
<html lang="zh-CN" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FlowZone 流境 - 让专注成为习惯</title>
    <meta name="description" content="FlowZone流境 - 重新定义你的工作方式，集成白噪音、番茄钟和任务管理，让每一刻都充满效率与平静。">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: {
                        sans: ['Noto Sans SC', 'sans-serif'],
                    },
                    colors: {
                        primary: {
                            50: '#f0f9ff',
                            100: '#e0f2fe',
                            200: '#bae6fd',
                            300: '#7dd3fc',
                            400: '#38bdf8',
                            500: '#0ea5e9',
                            600: '#0284c7',
                            700: '#0369a1',
                            800: '#075985',
                            900: '#0c4a6e',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50 font-sans">
    <!-- 导航栏 -->
    <nav class="fixed w-full bg-white/80 backdrop-blur-md shadow-sm z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex items-center">
                    <a href="#" class="flex items-center space-x-2">
                        <img src="../../../icons/icon_256_256.png" alt="FlowZone Logo" class="h-8 w-8">
                        <span class="text-xl font-bold text-primary-600">FlowZone</span>
                    </a>
                </div>
                <div class="hidden md:flex items-center space-x-8">
                    <a href="#features" class="text-gray-600 hover:text-primary-600 transition-colors">特性</a>
                    <a href="#benefits" class="text-gray-600 hover:text-primary-600 transition-colors">优势</a>
                    <a href="#pricing" class="text-gray-600 hover:text-primary-600 transition-colors">价格</a>
                    <a href="#start" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 transition-colors">
                        立即开始
                    </a>
                </div>
            </div>
        </div>
    </nav>
        <!-- Hero 区域 -->
        <section class="relative bg-gradient-to-br from-primary-600 to-primary-800 pt-32 pb-40 overflow-hidden">
            <!-- 背景装饰 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute top-1/4 left-1/4 w-64 h-64 bg-white rounded-full filter blur-3xl"></div>
                <div class="absolute bottom-1/4 right-1/4 w-64 h-64 bg-white rounded-full filter blur-3xl"></div>
            </div>
            
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-6">
                    专注当下，成就卓越
                </h1>
                <p class="text-xl sm:text-2xl text-primary-100 mb-8 max-w-3xl mx-auto">
                    重新定义你的工作方式，让效率与平静共存。
                    <span class="block mt-2 text-lg sm:text-xl opacity-90">
                        集成白噪音、番茄钟和任务管理，打造你的理想工作环境
                    </span>
                </p>
                <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
                    <a href="#start" class="w-full sm:w-auto px-8 py-4 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition-colors duration-300 shadow-lg hover:shadow-xl">
                        免费开始使用
                    </a>
                    <a href="#learn-more" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-white rounded-lg font-medium hover:bg-white/10 transition-colors duration-300">
                        了解更多
                    </a>
                </div>
                
                <!-- 数据展示 -->
                <div class="mt-16 grid grid-cols-2 md:grid-cols-4 gap-8 max-w-4xl mx-auto">
                    <div class="text-center">
                        <div class="text-4xl font-bold text-white mb-2">10K+</div>
                        <div class="text-primary-100">活跃用户</div>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-white mb-2">50M+</div>
                        <div class="text-primary-100">专注分钟</div>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-white mb-2">100+</div>
                        <div class="text-primary-100">音效场景</div>
                    </div>
                    <div class="text-center">
                        <div class="text-4xl font-bold text-white mb-2">4.9</div>
                        <div class="text-primary-100">用户评分</div>
                    </div>
                </div>
            </div>
        </section>
            <!-- 特性展示 -->
    <section id="features" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-20">
                <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
                    为专注而生的全能助手
                </h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    集成多种实用功能，让你的每一分钟都充满价值
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-12">
                <!-- 白噪音特性 -->
                <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                    <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.728-2.728"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">专注白噪音</h3>
                    <p class="text-gray-600 mb-4">
                        精选100+种自然音效，从雨声到咖啡厅，营造理想的工作氛围
                    </p>
                    <ul class="space-y-2 text-gray-500">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            自由混音组合
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            场景一键切换
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            智能音量调节
                        </li>
                    </ul>
                </div>

                <!-- 番茄钟特性 -->
                <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                    <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">智能番茄钟</h3>
                    <p class="text-gray-600 mb-4">
                        科学的时间管理方法，让工作和休息完美平衡
                    </p>
                    <ul class="space-y-2 text-gray-500">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            自定义工作时长
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            智能休息提醒
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            专注数据统计
                        </li>
                    </ul>
                </div>

                <!-- 任务管理特性 -->
                <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                    <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                        <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                        </svg>
                    </div>
                    <h3 class="text-xl font-bold text-gray-900 mb-4">任务清单</h3>
                    <p class="text-gray-600 mb-4">
                        简洁高效的任务管理，让目标清晰可见
                    </p>
                    <ul class="space-y-2 text-gray-500">
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            优先级管理
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            进度追踪
                        </li>
                        <li class="flex items-center">
                            <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            数据同步备份
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </section>
        <!-- 特性展示 -->
        <section id="features" class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-20">
                    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
                        为专注而生的全能助手
                    </h2>
                    <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                        集成多种实用功能，让你的每一分钟都充满价值
                    </p>
                </div>
    
                <div class="grid md:grid-cols-3 gap-12">
                    <!-- 白噪音特性 -->
                    <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                        <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.728-2.728"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-4">专注白噪音</h3>
                        <p class="text-gray-600 mb-4">
                            精选100+种自然音效，从雨声到咖啡厅，营造理想的工作氛围
                        </p>
                        <ul class="space-y-2 text-gray-500">
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                自由混音组合
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                场景一键切换
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                智能音量调节
                            </li>
                        </ul>
                    </div>
    
                    <!-- 番茄钟特性 -->
                    <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                        <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-4">智能番茄钟</h3>
                        <p class="text-gray-600 mb-4">
                            科学的时间管理方法，让工作和休息完美平衡
                        </p>
                        <ul class="space-y-2 text-gray-500">
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                自定义工作时长
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                智能休息提醒
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                专注数据统计
                            </li>
                        </ul>
                    </div>
    
                    <!-- 任务管理特性 -->
                    <div class="relative p-8 bg-gray-50 rounded-2xl hover:shadow-lg transition-shadow duration-300">
                        <div class="absolute top-0 right-0 -mt-4 mr-4 w-12 h-12 bg-primary-100 rounded-full flex items-center justify-center">
                            <svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path>
                            </svg>
                        </div>
                        <h3 class="text-xl font-bold text-gray-900 mb-4">任务清单</h3>
                        <p class="text-gray-600 mb-4">
                            简洁高效的任务管理，让目标清晰可见
                        </p>
                        <ul class="space-y-2 text-gray-500">
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                优先级管理
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                进度追踪
                            </li>
                            <li class="flex items-center">
                                <svg class="w-4 h-4 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                                </svg>
                                数据同步备份
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
            <!-- 价格方案 -->
    <section id="pricing" class="py-24 bg-white">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="text-center mb-20">
                <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
                    选择适合你的方案
                </h2>
                <p class="text-xl text-gray-600 max-w-2xl mx-auto">
                    从个人到团队，我们提供灵活的价格方案，满足不同场景需求
                </p>
            </div>

            <div class="grid md:grid-cols-3 gap-8">
                <!-- 免费版 -->
                <div class="bg-white border border-gray-200 rounded-2xl p-8 hover:shadow-lg transition-shadow duration-300">
                    <div class="text-center mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">免费版</h3>
                        <div class="text-4xl font-bold text-gray-900 mb-4">¥0<span class="text-base font-normal text-gray-500">/永久</span></div>
                        <p class="text-gray-600">适合个人轻度使用</p>
                    </div>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            基础白噪音库
                        </li>
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            标准番茄钟
                        </li>
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            基础任务管理
                        </li>
                    </ul>
                    <a href="#" class="block w-full py-3 px-6 text-center text-primary-600 font-medium border border-primary-600 rounded-lg hover:bg-primary-50 transition-colors duration-300">
                        开始使用
                    </a>
                </div>

                <!-- 专业版 -->
                <div class="bg-primary-600 border border-primary-600 rounded-2xl p-8 transform scale-105 shadow-xl">
                    <div class="text-center mb-8">
                        <span class="inline-block px-4 py-1 rounded-full bg-primary-500 text-white text-sm font-medium mb-4">最受欢迎</span>
                        <h3 class="text-lg font-semibold text-white mb-2">专业版</h3>
                        <div class="text-4xl font-bold text-white mb-4">¥99<span class="text-base font-normal text-primary-200">/年</span></div>
                        <p class="text-primary-100">适合个人深度使用</p>
                    </div>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-center text-white">
                            <svg class="w-5 h-5 text-primary-200 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            完整白噪音库
                        </li>
                        <li class="flex items-center text-white">
                            <svg class="w-5 h-5 text-primary-200 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            高级番茄钟设置
                        </li>
                        <li class="flex items-center text-white">
                            <svg class="w-5 h-5 text-primary-200 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            完整任务管理
                        </li>
                        <li class="flex items-center text-white">
                            <svg class="w-5 h-5 text-primary-200 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            数据导出
                        </li>
                        <li class="flex items-center text-white">
                            <svg class="w-5 h-5 text-primary-200 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            优先客服支持
                        </li>
                    </ul>
                    <a href="#" class="block w-full py-3 px-6 text-center text-primary-600 font-medium bg-white rounded-lg hover:bg-primary-50 transition-colors duration-300">
                        立即升级
                    </a>
                </div>

                <!-- 团队版 -->
                <div class="bg-white border border-gray-200 rounded-2xl p-8 hover:shadow-lg transition-shadow duration-300">
                    <div class="text-center mb-8">
                        <h3 class="text-lg font-semibold text-gray-900 mb-2">团队版</h3>
                        <div class="text-4xl font-bold text-gray-900 mb-4">¥299<span class="text-base font-normal text-gray-500">/年</span></div>
                        <p class="text-gray-600">适合团队协作使用</p>
                    </div>
                    <ul class="space-y-4 mb-8">
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            包含专业版全部功能
                        </li>
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            团队协作功能
                        </li>
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            团队数据分析
                        </li>
                        <li class="flex items-center text-gray-600">
                            <svg class="w-5 h-5 text-primary-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            专属客户经理
                        </li>
                    </ul>
                    <a href="#" class="block w-full py-3 px-6 text-center text-primary-600 font-medium border border-primary-600 rounded-lg hover:bg-primary-50 transition-colors duration-300">
                        联系我们
                    </a>
                </div>
            </div>
        </div>
    </section>
        <!-- 行动召唤 -->
        <section id="start" class="relative py-24 bg-primary-600 overflow-hidden">
            <!-- 背景装饰 -->
            <div class="absolute inset-0 opacity-10">
                <div class="absolute -top-24 -right-24 w-96 h-96 bg-white rounded-full filter blur-3xl"></div>
                <div class="absolute -bottom-24 -left-24 w-96 h-96 bg-white rounded-full filter blur-3xl"></div>
            </div>
    
            <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">
                    开启你的专注之旅
                </h2>
                <p class="text-xl text-primary-100 mb-8 max-w-2xl mx-auto">
                    立即体验 FlowZone，让每一天都充满效率与平静
                </p>
                <div class="flex flex-col sm:flex-row justify-center items-center space-y-4 sm:space-y-0 sm:space-x-6">
                    <a href="#" class="w-full sm:w-auto px-8 py-4 bg-white text-primary-600 rounded-lg font-medium hover:bg-primary-50 transition-colors duration-300 shadow-lg hover:shadow-xl">
                        免费开始使用
                    </a>
                    <a href="#" class="w-full sm:w-auto px-8 py-4 border-2 border-white text-white rounded-lg font-medium hover:bg-white/10 transition-colors duration-300">
                        查看使用教程
                    </a>
                </div>
            </div>
        </section>
    
        <!-- 页脚 -->
        <footer class="bg-gray-900 text-gray-400 py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8 mb-8">
                    <!-- 产品 -->
                    <div>
                        <h3 class="text-white font-semibold mb-4">产品</h3>
                        <ul class="space-y-2">
                            <li><a href="#features" class="hover:text-white transition-colors">功能特性</a></li>
                            <li><a href="#pricing" class="hover:text-white transition-colors">价格方案</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">更新日志</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">路线图</a></li>
                        </ul>
                    </div>
    
                    <!-- 资源 -->
                    <div>
                        <h3 class="text-white font-semibold mb-4">资源</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">使用教程</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">API 文档</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">帮助中心</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">社区</a></li>
                        </ul>
                    </div>
    
                    <!-- 关于 -->
                    <div>
                        <h3 class="text-white font-semibold mb-4">关于</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">关于我们</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">博客</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">工作机会</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">联系我们</a></li>
                        </ul>
                    </div>
    
                    <!-- 法律 -->
                    <div>
                        <h3 class="text-white font-semibold mb-4">法律</h3>
                        <ul class="space-y-2">
                            <li><a href="#" class="hover:text-white transition-colors">隐私政策</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">服务条款</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">安全说明</a></li>
                            <li><a href="#" class="hover:text-white transition-colors">Cookie 政策</a></li>
                        </ul>
                    </div>
                </div>
    
                <!-- 分隔线 -->
                <div class="border-t border-gray-800 pt-8">
                    <div class="flex flex-col md:flex-row justify-between items-center">
                        <!-- Logo 和版权信息 -->
                        <div class="flex items-center mb-4 md:mb-0">
                            <img src="../../../icons/icon_256_256.png" alt="FlowZone Logo" class="h-8 w-8 mr-2">
                            <span class="text-white font-semibold">FlowZone</span>
                            <span class="ml-4 text-sm">© 2024 FlowZone. All rights reserved.</span>
                        </div>
    
                        <!-- 社交媒体链接 -->
                        <div class="flex space-x-6">
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <span class="sr-only">Twitter</span>
                                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"></path>
                                </svg>
                            </a>
                            <a href="#" class="text-gray-400 hover:text-white transition-colors">
                                <span class="sr-only">GitHub</span>
                                <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
                                    <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"></path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
    </body>
    </html>